<template>
	<view>
		<!-- 文章 -->
		<xz-article :posttype="false" :postdata="postdata"></xz-article>
		<!-- 评论区 -->
		<view v-if="chatdata.length" class="" v-for="(item,index) in chatdata" style="border-bottom: solid .5rpx #f4f4f4;">
			<view style="display: flex;align-items: center;justify-content: space-between;margin: 50rpx;">
				<view class="" style="display: flex;">
					<view class="" style="position: relative;">
						<u-avatar size="45" shape="square" :src="item.user_pic"></u-avatar>
					</view>
					<view class="" style="display: flex;flex-direction: column;margin-left: 20rpx;">
						<view class="" style="display: flex;align-items: center;">
							<text style="font-weight: bold;font-size: 35rpx;">{{item.nickname}}</text>
							<image v-if="item.rz_type==1" src="../../static/rz.png"
								style="width: 30rpx;height: 30rpx;margin: 0 10rpx;">
							</image>
							<view v-if="item.user_id==usersid" class=""
								style="background-color: #3668fc;color: #ffffff;border-radius: 5rpx;padding: 0 10rpx;font-size: 25rpx;height: 30rpx;">
								作者
							</view>
						</view>
						<uni-dateformat style="font-size: 25rpx;color: #a1a1a1;"
							:date="item.releasetime*1000" format="yyyy-MM-dd"
							:threshold="[60000, 3600000 * 24]">
						</uni-dateformat>
					</view>
				</view>
				<view class="" style="display: flex;justify-content: center;align-items: center;">
					<!-- <text>{{item.like_count}}</text>
					<u-icon name="thumb-up" color="#333333" size="20" :bold="true"></u-icon> -->
				</view>
			</view>
			<view class="" style="margin: 0 100rpx 30rpx 100rpx;">
				<u--text :lines="10" :text="item.articles_comment"></u--text>
			</view>
		</view>
		<view style="height: 250rpx;">
			<u-loadmore status="loading" loadingText="正在寻找这个世界上最后的角落" loadmoreText="下拉加载" nomoreText="这个世界太空旷了" loadingIcon="circle"></u-loadmore>
		</view>
		<!-- 评论输入框 -->
		<view class="" style="position: fixed;bottom: 0;height: 200rpx;background-color: #ffffff;width: 100%;border-top: .5rpx solid #d5d5d5;display: flex;">
			<view class="" style="background-color: #ececec;border-radius: 50rpx;height: 80rpx;flex: 3;margin: 20rpx 0 0 20rpx;border-radius: 50rpx 0 0 50rpx;display: flex;align-items: center;">
				<input style="margin-left: 20rpx;" v-model="comment" type="text" value="" placeholder="说点好听的" />
			</view>
			<view @click="addchat" class="" style="color: #ffffff;flex: 1;display: flex;align-items: center;justify-content: center;height: 80rpx;background-color: #3668fc;margin: 20rpx 20rpx 0 0;border-radius: 0 50rpx 50rpx 0;">
				发送
			</view>
		</view>
	</view>
</template>

<script>
	import xZarticle from "../../components/xz-article/xz-article.vue"
	export default {
		components: {
			xZarticle
		},
		data() {
			return {
				usersid: null,
				postdata:[],
				chatdata:[],
				comment:null,
				articles_id:null,
				pagetotal: 10,
				//当前页
				pagesize: 1,
				user_id:null
			}
		},
		onLoad(option) {
			this.articles_id=option.id
			this.getuser()
			this.getcommon(option.id)
			this.getpost(option.id)
		},
		methods: {
			getuser(){
				uni.getStorage({
					key:'userinfo',
					success: (res) => {
						this.user_id=res.data.id
					},
				})
			},
			//添加评论
			addchat() {
				if (this.comment) {
					this.$http({
						url:'/articlelike/addcomment',
						data:{
							articles_id:this.articles_id,
							articles_user_id:this.user_id,
							articles_comment:this.comment
						},
						method:'POST',
					}).then(res=>{
						if (res.status==0) {
							this.comment=""
							uni.showToast({
								title:res.message,
								icon:'none'
							})
							this.$http({
								url: '/api/getarticlecomment',
								data: {
									pagetotal: this.pagetotal,
									pagesize: this.pagesize,
									article_id: this.articles_id
								},
							}).then(res => {
								this.chatdata = res
								console.log(res);
							})
						} else{
							uni.showToast({
								title:res.message,
								icon:'none'
							})
						}
					})
				} else{
					uni.showToast({
						title:"说点什么呀",
						icon:'none'
					})
				}
			},
			getpost(id){
				this.$http({
					url:'/api/getarticleone',
					data:{
						article_id:id,
						user_id:this.user_id,
					}
				}).then(res=>{
					this.usersid=res[0].user_id
					this.postdata=res
					console.log(res);
				})
			},
			getcommon(id){
				this.$http({
					url:'/api/getarticlecomment',
					data:{
						pagetotal:10,
						pagesize:1,
						article_id:id,
					}
				}).then(res=>{
					this.chatdata=res
					console.log(res);
				})
			}
		}
	}
</script>

<style>

</style>
